<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Watchdog-barking</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>

</head>
<body>
    <div id="pps_chart" style="width:50%; height:50%; position:absolute; left:1%; top:1%"></div>
    <div id="bps_chart" style="width:50%; height:50%; position:absolute; right:1%; top:1%"></div>

    <div id="package_cnt" style="width: 33%; height: 45%; position:absolute; left:1%; top:55%"></div>
    <div id="byte_cnt" style="width: 33%; height: 45%; position:absolute; left:33%; top:55%"></div>
    <div id="flow_cnt" style="width: 33%; height: 45%; position:absolute; right:1%; top:55%"></div>

    <script>
        pps_chart = echarts.init(document.getElementById('pps_chart'), 'white', {renderer: 'canvas'});
        bps_chart = echarts.init(document.getElementById('bps_chart'), 'white', {renderer: 'canvas'});
        package_cnt = echarts.init(document.getElementById('package_cnt'), 'white', {renderer: 'canvas'});
        byte_cnt = echarts.init(document.getElementById('byte_cnt'), 'white', {renderer: 'canvas'});
        flow_cnt = echarts.init(document.getElementById('flow_cnt'), 'white', {renderer: 'canvas'});

        var s1_old_data = [];
        var s2_old_data = [];
        var s3_old_data = [];
        var s4_old_data = [];
        var s5_old_data = [];

        var s1_old_byte = [];
        var s2_old_byte = [];
        var s3_old_byte = [];
        var s4_old_byte = [];
        var s5_old_byte = [];

        $(
            function () {
                fetchData(pps_chart);
                fetch_pkt(package_cnt);
                fetch_byte(byte_cnt);
                fetch_flow(flow_cnt);
                fetchData3(bps_chart);

                setInterval(getDynamicData, 1000);
                setInterval(fetch_pkt, 1000);
                setInterval(fetch_byte, 1000);
                setInterval(fetch_flow, 1000);
            }
        );

        function fetchData() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:5000/lineChart",
                dataType: "json",
                success: function (result) {
                    pps_chart.setOption(result);
                    s1_old_data = pps_chart.getOption().series[0].data;
                    s2_old_data = pps_chart.getOption().series[1].data;
                    s3_old_data = pps_chart.getOption().series[2].data;
                    s4_old_data = pps_chart.getOption().series[3].data;
                    s5_old_data = pps_chart.getOption().series[4].data;
                }
            });
        }

        function fetch_pkt() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:5000/pkt_barChart",
                dataType: "json",
                success: function (result) {
                    package_cnt.setOption(result);
                }
            });
        }

        function fetch_byte() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:5000/byte_barChart",
                dataType: "json",
                success: function (result) {
                    byte_cnt.setOption(result);
                }
            });
        }

        function fetch_flow() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:5000/flow_barChart",
                dataType: "json",
                success: function (result) {
                    flow_cnt.setOption(result);
                }
            });
        }

        function fetchData3() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:5000/byteChart",
                dataType: "json",
                success: function (result) {
                    bps_chart.setOption(result);
                    s1_old_byte = bps_chart.getOption().series[0].data;
                    s2_old_byte = bps_chart.getOption().series[1].data;
                    s3_old_byte = bps_chart.getOption().series[2].data;
                    s4_old_byte = bps_chart.getOption().series[3].data;
                    s5_old_byte = bps_chart.getOption().series[4].data;
                }
            });
        }

        function getDynamicData() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:5000/lineDynamicData",
                dataType: "json",
                success: function (result) {
                    s1_old_data.push([result.name1, result.value1]);
                    s2_old_data.push([result.name2, result.value2]);
                    s3_old_data.push([result.name3, result.value3]);
                    s4_old_data.push([result.name4, result.value4]);
                    s5_old_data.push([result.name5, result.value5]);
                    pps_chart.setOption({
                        series: [{data: s1_old_data},
                                 {data: s2_old_data},
                                 {data: s3_old_data},
                                 {data: s4_old_data},
                                 {data: s5_old_data}]
                    });

                    s1_old_byte.push([result.name6, result.value6]);
                    s2_old_byte.push([result.name7, result.value7]);
                    s3_old_byte.push([result.name8, result.value8]);
                    s4_old_byte.push([result.name9, result.value9]);
                    s5_old_byte.push([result.name10, result.value10]);
                    bps_chart.setOption({
                        series: [{data: s1_old_byte},
                                 {data: s2_old_byte},
                                 {data: s3_old_byte},
                                 {data: s4_old_byte},
                                 {data: s5_old_byte}]
                    });

                }
            });
        }

    </script>
</body>
</html>
